<template>
  <div>
    <!-- 搜索 -->
    <van-search
      v-model="value"
      show-action
      placeholder="请输入搜索关键词"
      @search="onSearch"
      background="rgba(194, 51, 51, 0) "
    >
      <template #label
        ><span @click="$router.push(`/citylist/${bensi}`)">{{ bensi }}</span
        >▼</template
      >
      <template #action>
        <div @click="onSearch">
          <van-icon name="location-o" class="map" color="rgb(255, 255, 255)" @click="$router.push('/map')"/>
        </div>
      </template>
    </van-search>
    <!-- 轮播 -->
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item v-for="item in swipe" :key="item.id"
        ><img
          :src="'http://liufusong.top:8080' + item.imgSrc"
          alt=""
          class="imgswipe"
      /></van-swipe-item>
    </van-swipe>
    <!-- 宫格 -->
    <div class="grid1">
      <van-grid>
        <van-grid-item icon="wap-home-o" text="整租" />
        <van-grid-item icon="friends-o" text="合租" />
        <van-grid-item icon="aim" text="地图找房" />
        <van-grid-item icon="shop-collect-o" text="去出租" />
      </van-grid>
    </div>
    <!-- 租房小组 -->
    <div class="zfxz">
      <!-- top -->
      <div class="top">
        <h4>租房小组</h4>
        <a href="#">更多</a>
      </div>
      <van-grid
        :border="false"
        :column-num="2"
        :gutter="10"
        direction="horizontal"
      >
        <van-grid-item v-for="item in zufang" :key="item.id">
          <van-image
            width="60"
            height="60"
            :src="'http://liufusong.top:8080' + item.imgSrc"
          />
          <p>
            <span>{{ item.title }}</span
            ><br />
            <span>{{ item.desc }}</span>
          </p>
        </van-grid-item>
      </van-grid>
    </div>
  </div>
</template>

<script>
import { getswipe, getzufang } from '@/api/home'
import { get } from '@/utils/localStorage'
export default {
  name: 'home-page',
  data() {
    return {
      swipe: [],
      value: null,
      zufang: [],
      bensi: JSON.parse(get()).label || '城市'
    }
  },
  async created() {
    const res = await getswipe()
    this.swipe = res.data.body
    const rej = await getzufang()
    this.zufang = rej.data.body
  },
  methods: {
    onSearch() {}
  }
}
</script>

<style scoped lang="less">
// 搜索
.van-search__label {
  height: 25px;
  padding: 0;
  text-align: center;
  line-height: 25px;
}
.van-search__content {
  padding: 5px;
  border-radius: 3px;
  align-items: center;
}
.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  line-height: 150px;
  text-align: center;
  background-color: #39a9ed;
}
.van-search--show-action {
  position: fixed;
  top: 10px;
  left: 5%;
  z-index: 9999;
  width: 90%;
}
.van-search .van-cell {
  padding: 0px 0px 0px 10px;
  margin-left: 10px;
  border-left: 1px solid rgb(187, 185, 185);
}
.map {
  font-size: 30px !important;
  width: 25px !important;
  margin-top: 8px !important;
}
.imgswipe {
  width: 100%;
  height: 100%;
}
// 宫格1
.grid1 {
  ::v-deep .van-grid-item__icon {
    background-color: #f2fbf7;
    color: #06b069;
    border-radius: 50%;
    width: 60px;
    height: 60px;
    text-align: center;
    line-height: 60px;
    font-size: 40px;
  }
  ::v-deep .van-grid-item__text {
    font-size: 16px !important;
  }
  ::v-deep .van-grid-item__content::after {
    border-width: 0px 0px 0px 0px !important;
  }
}

.zfxz {
  width: 100%;
  padding-bottom: 10px;
  background: rgb(240, 239, 239);
  .top {
    width: 90%;
    height: 40px;
    // background: rgb(255, 254, 254);
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    line-height: 40px;
    h4 {
      font-size: 18px;
      color: #000;
    }
    a {
      font-size: 16px;
      color: #000;
    }
  }
  ::v-deep .van-grid-item__content {
    padding: 5px;
    border-radius: 5px;
    p {
      width: 100px;
      // background: rgb(209, 86, 86);
      padding-left: 10px;
      font-size: 14px;
    }
  }
}
</style>
